<template>
    <el-aside class="menu-box"
              width="200px">
        <el-menu default-active="1"
                 class="el-menu-vertical-demo"
                 background-color="#393d49"
                 text-color="#fff"
                 active-text-color="#5FB878">
            <el-submenu v-for="(item,index) in menuList"
                        :key="index"
                        :index="item.menuId">
                <template slot="title">
                    <i class="ui-icon  menu-icon"
                       :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="(subItem,subIndex) in item.sub"
                                  :key="subIndex"
                                  :index="subItem.menuId"
                                  @click="openTab(subItem)">
                        {{subItem.title}}
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </el-aside>
</template>

<script>
import meunConf from "../router/meun";
export default {
    name: "indexMenu",
    data() {
        return {
            meunConf: meunConf, // 全局配置
            menuList: [] // 复制一份菜单列表
        };
    },
    methods: {
        initializeMemu() {
            this.menuList = JSON.parse(JSON.stringify(this.meunConf.menu));
        },
        // 初始化
        init() {
            var that = this;
            that.$ajax.get("/menu").then(function(res) {
                if (res.code == "100") {
                    meunConf.menu=res.data;
                    that.initializeMemu();
                }
            });
        },
        // 打开 页签
        openTab(item) {
            this.$tab.open(item);
        }
    },
    mounted() {
        var that = this;
        that.init();
    }
};
</script>

<style  scoped>
.el-menu {
    border: none;
}
.menu-box {
    background: #393d49;
}
.menu-icon {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
}
</style>